<template>
  <div class="chat-content">
      <cu-header :height="80" class="chat-header"/>
      
      <!-- 聊天窗口 -->
      <div class="chat-out">
        <div class="chat">
            <!-- 显示聊天好友 -->
            <div class="goods-grid"  @click="handleDetail">
                <div class="goods-info" >
                    <div class="flex flex-justify-content-between">
                        <div class="goods-price">{{ detail.creatorNick }}</div>
                        <div class="goods-title text-ellipsis-2" style="margin-left:20px">{{ detail.name }}</div>
                    </div>
                    
                    <div class="user-info mt5">
                        <span>{{ detail.price | num2Money }} KZ</span>
                    </div>
                </div>
                <i class="el-icon-arrow-right"></i>
            </div>
            <!-- 聊天列表 -->
            <div class="chat-list" id='chatList'>
                <div v-for="(item,index) in chatList" :key="index">
                    <div class="chat-inner-me" v-if="item.senderName === user.username">
                        <div>
                            <div class="text">{{item.messageContent}}</div>
                            <div style="color:#666;font-size:12px;margin-top:5px">{{item.createTime.substring(5)}}</div>
                        </div>
                    </div>
                    <div class="chat-inner-other" v-if="item.senderName !== user.username">
                        <div>
                            <div class="text">{{item.messageContent}}</div>
                            <div style="color:#666;font-size:12px;margin-top:5px">{{item.createTime.substring(5)}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-send">
                <input placeholder="Escreve uma mensagem..." class="textarea" :rows="3" type="textarea" v-model='messageContent' @keydown.enter="sendMsg"/>
                <div style="text-align:right;margin:5px 10px 5px 0;" class="button">
                    <el-button size="mini"  @click="close">{{$t('component.conversation.2')}}</el-button>
                    <el-button size="mini" type="primary" @click="sendMsg">{{$t('component.conversation.1')}}</el-button>
                </div>

            </div>
        </div>
        <div class="dialog-attention">
            <p class="attention">Dicas de Segurança</p>
            1,Mantém a conversa dentro do chat do Vivebo sempre que possível.<br />
            2,Evita pagar antecipadamente.<br />
            3,Verifica sempre o artigo antes de comprar.<br />
            4,Encontre o vendedor em um local público com o qual você esteja familiarizado<br />
        </div> 
      </div>
  </div>
</template>
<script>
import CuHeader from '@/components/header';
import { isLogin } from '@/utils';
import { Domain } from '@/constants';
import Api from '@/api';
export default {
  name: '',
  components:{CuHeader},
  data() {
    return {
      list: [],
      domain: Domain,
      detail: {},
      chatList:[],
      submitObj:{
        channelId:null,
        senderCode:"",
        senderName:"",
        senderImg:"",
        receiverCode:"",
        receiverName:"",
        receiverImg:"",
        messageContent:"",
        supplyId:"",
        supplyName:"",
        supplyImage:"",
      },
      user:{},
      messageContent:"",
      receiver:{}
    };
  },
  watch: {
    $route(to, form) {
      this.submitObj.supplyId = this.$route.query.supplyId;
      this.receiver = JSON.parse(this.$route.query.detail)
      this.loadDetail();
      this.loadUserInfo();
      this.getChatList()
      this.$router.go(0);
    },
  },
  created() {
    this.submitObj.supplyId = this.$route.query.supplyId;
    this.receiver = JSON.parse(this.$route.query.detail)
    this.loadDetail();
    this.loadUserInfo();
    this.getChatList()
  },
  methods:{
    close(){
        this.$router.go(-1)
    },
    getChatList(){
      Api.messageList({pageNo:1,pageSize:50,channelId:this.$route.query.channelId}).then(res=>{
        this.chatList = res.records.reverse()
        // 改变视窗高度
        this.$nextTick(()=>{
            let chatWindow = document.getElementById('chatList')
            chatWindow.scrollTop = chatWindow.scrollHeight
        })
      })
    },
    loadDetail() {
      const params = { id: this.submitObj.supplyId };
      Api.goodsDetail(params).then((res) => {
        this.detail = res;
        this.detail.imgs = res.imgList ? JSON.parse(res.imgList) : [];
        this.submitObj.supplyImage = this.detail.imgs.length > 0 ? this.detail.imgs[0] : "";
        this.submitObj.supplyName = this.detail.name;
        this.submitObj.receiverCode = this.receiver.askId;
        this.submitObj.receiverName = this.receiver.askName;
        this.submitObj.receiverImg = this.receiver.askImg;
        this.submitObj.channelId = this.$route.query.channelId;

      });
    },
    // 获取用户
     loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res
        this.submitObj.senderName = res.username;
        this.submitObj.senderCode = res.id;
        this.submitObj.senderImg = res.avatar;
      });
    },
    goBack(){
      this.$router.go(-1)
    },
    // 去商品详情页面
    handleDetail() {
      this.$router.push({path: "/detail", query: {id: this.submitObj.supplyId}});
    },
    sendMsg(){
      if(this.messageContent !== ""){
        this.submitObj.messageContent = this.messageContent
        this.messageContent = ""
        Api.sendMessage(this.submitObj).then(res=>{
          this.chatList.push(res)
          // 改变视窗高度
            this.$nextTick(()=>{
                let chatWindow = document.getElementById('chatList')
                chatWindow.scrollTop = chatWindow.scrollHeight
            })
        })
      }else{
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chat-content{
    height:100%;
    background-color: #f2f2f2;
    padding-bottom:40px;
    overflow: hidden;
    position: relative;
}
.chat-header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.chat-out{
    
    display: flex;
    width: 65%;
    margin: auto;
    margin-top: 100px;
}
.chat{
    background-color: #fff;
    width: 75%;
    // height: 60%;
    height: 550px;
    // border: 1px solid #fb8c24;
    margin: 40px auto;
    margin-top: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 95px;

}
.target-user{
    color: #fff;
    background-color: #fb8c24;
    margin: 0;
    text-align: center;
    padding: 15px 0;font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.8;
}
.goods-grid{
    color: #fff;
    background-color: #fb8c24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    i{
        font-size: 26px;
    }
}
.chat-list{
    // height: calc(100% - 75px);
    height: 460px;
    overflow: auto;
    padding: 15px 0;
    .chat-inner-me{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;
        margin-bottom: 10px;
        .text{
            font-size: 14px;
            margin-right: 5px;
            color: #fff;
            background-color: #fb8c24;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:10px;
        }
    }
    .chat-inner-other{
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
        .text{
            font-size: 14px;
            margin-right: 5px;
            color: #fb8c24;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
           padding:10px;
           border: 1px solid #fb8c24;
        }
    }
}
.chat-send{
    width: 100%;
    border-top: 1px dashed #fb8c24;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 0;
    .button{
        width: 160px;
    }
    // .el-textarea{
    //     border-top:1px solid #fb8c24 !important;
    // }
    .textarea{
        margin-top: 5px;
        border: none;
        border: 1px solid #fb8c24;
        height: 80px;
        outline: none;
        font-size: 14px;
        padding: 0 5px;
        padding-left: 10px;
        border-bottom-left-radius: 10px;
        flex: 1;
    }
}
 .user-head {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    margin-right: 5px;
    display: inline-block;
    background-color: #999999;
}
 .dialog-attention{
   width:25%;
   height: 645px;
   text-align:center;
   background-color: #fff;
   padding:0px 40px;
   padding-top: 0px;
   line-height: 28px;
   text-align: left;
   color: #595959;
   margin-left: 30px;
   border-radius: 10px;
   .attention{
     font-size: 18px;
     text-align: left;
   }
 }
</style>
